<html>
  <head>
    <meta charset="utf-8">
    <style>
     @media (max-width: 425px){ /*0~425*/
        body{
            background: yellow;
        }
     }
     @media (max-width: 375px){ /*0~375*/
        body{
            background: blue;
        }
     }
     @media (max-width: 320px){ /*0~320*/
        body{
            background: pink;
        }
     }

     @media (min-width: 629px) and (max-width: 1140px) { /*769~+∞*/
        body{
            background: #fff;
        }
        .container{
        padding:0;
        height:100%;
        box-sizing: border-box;
        width:100% !important;
        margin: 0 auto;
      }
     }

      a{
        text-decoration: none;
        color: #304455
      }
      .docs {
        padding-top: 61px;
      }
      body {
        overflow: hidden;
        overflow-y: hidden;
        font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
        font-size: 1rem;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #304455;
        /* background-color: #fff; */
        margin: 0;
      }

      /* 网页和header共用的container 大屏留白 */
      .container{
        padding:0;
        height:100%;
        box-sizing: border-box;
        width:1140px;
        margin: 0 auto;
      }
      .container h1{
        margin: 0;
        float: left;
        font-size: 18px;
        font-weight: 300;
      }
      /* 最外层的header包裹 */
      .headerWrapper{
        position: fixed;
        width: 100%;
        left:0;
        top: 0;
        z-index: 1500;
      }

      #header {
        box-shadow: 0 0 1px rgba(0, 0, 0, 0.25);
        transition: background-color 0.3s ease-in-out;
      }
      #header {
        background-color: #fff;
        height: 40px;
        padding: 10px 0px;
        position: relative;
        z-index: 20;
      }
      /* 图像a标签 */
      #logo {
        display: inline-block;
        line-height: 40px;
        font-size: 1.5em;
        font-family: "Dosis", "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
        font-weight: 500;
        color:black;
      }
      /* 图像本身 */
      #logo img{
        vertical-align: middle;
        margin-right: 6px;
        width:40px;
        height:40px;
      }
      /* nav：内侧导航栏 包裹 */

      #nav {
        list-style-type: none;
        float: right;
        margin: 0;
        padding: 0;
        height: 40px;
        line-height: 40px;
      }

      /* 导航栏内的每个单项 */
      #nav li {
        display: inline-block;
        position: relative;
        margin: 0 0.6em
      }

      /* 导航栏的搜索框 */
      .search-query{
        height:30px;
        line-height: 30px;
        box-sizing: border-box;
        padding: 0 15px 0 30px;
        border: 1px solid #e3e3e3;
        color: #273849;
        outline:none;
        border-radius: 15px;
        margin-right: 10px;
        transition: border-color 0.2s ease;
        background: #fff url(https://cn.vuejs.org/images/search.png) 8px 5px no-repeat;
        background-size: 20px;
        vertical-align: middle !important;
      }

      /* 导航栏的下拉菜单 */
      #nav .nav-dropdown-container{
        padding-right: 0.8em;
      }

      /* 导航栏每一个选项的细节样式 */
      #nav .nav-link{
        cursor: pointer;
      }
      .nav-link:hover{
        border-bottom:3px solid #42b983
      }
      .nav-link.current{
        color: #358a63
      }
      .nav-link{
        padding-bottom: 3px;
        white-space: nowrap;
      }

      /* 导航栏内的三角▶下箭头的css实现 */
      #nav .nav-dropdown-container .arrow{
        pointer-events: none;
      }
      #nav .arrow {
          display: inline-block;
          vertical-align: middle;
          margin-top: -1px;
          margin-left: 6px;
          margin-right: -14px;
          width: 0;
          height: 0;
          border-left: 4px solid transparent;
          border-right: 4px solid transparent;
          border-top: 5px solid #4f5959;
      }
    </style>
  </head>
  <body class="docs">
    <div class="headerWrapper">
      <header id="header">
        <div class="container">
          <h1>
            <a id="logo" href="http://www.bupt.edu.cn">
            <img src="https://cn.vuejs.org/images/logo.png">
            <span>Vue.js</span>
          </a>
          </h1>

          <ul id="nav">
            <li>
              <form id="search-form">
                <input
                type="text"
                class="search-query st-default-search-input aa-input"
                aria-label="搜索"
                autocomplete="off"
                spellcheck="false"
                role="combobox"
                aria-autocomplete="list"
                aria-expanded="false"
                aria-owns="algolia-autocomplete-listbox-0">
              </form>
            </li>
            <li class="nav-dropdown-container learn">
              <a class="nav-link current">学习</a>
              <span class="arrow"></span>
            </li>
            <li class="nav-dropdown-container ecosystem">
              <a class="nav-link">生态系统</a>
              <span class="arrow"></span>
            </li>
            <li>
              <a class="nav-link">联系我们</a>
            </li>
          </ul>
        </div>
      </header>
    </div>
  </body>
</html>
